<template>
  <div class="">
    <h2>小黑记事本</h2>
    <div class="top">
      <input
        @keydown.enter="add"
        v-model="inputStr"
        type="text"
        placeholder="请输入任务"
      />
      <button @click="add">添加任务</button>
    </div>
  </div>
</template>
<script >
export default {
  data() {
    return {
      inputStr: "",
    };
  },
  props: [],
  components: {},
  created() {},
  mounted() {},
  methods: {
    add() {
      if (this.inputStr.trim() === "") {
        alert("不能为空值");
        return;
      } else {
        this.$emit("add", this.inputStr);
        this.inputStr = "";
      }
    },
  },
};
</script>
<style lang='less' scoped>
h2 {
  text-align: center;
}
.top {
  position: relative;
  width: 100%;

  input {
    padding-left: 14px;
    display: block;
    outline-style: none;
    width: 100%;
    height: 30px;
  }

  button {
    position: absolute;
    top: 6px;
    right: 0;
    border: none;
    outline: none;
    background-color: #fff;
  }
}
</style>